<template>
  <div class="LiningAdminDetail">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="款号" prop="type_no">
        <el-input
          placeholder="请输入款号"
          v-model="form.type_no"
          @blur="onBlur"
          :disabled="form.id"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU" prop="sku_code">
        <el-input
          placeholder="请输入SKU"
          v-model="form.sku_code"
          v-if="form.id"
          :disabled="form.id"
        ></el-input>
        <div v-else>
          <el-checkbox
            v-if="list.length"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="form.sku_code"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(item, index) in list"
              :label="item"
              :key="index"
              >{{ item }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="面料1" prop="lining_one">
        <el-input
          placeholder="请输入面料1"
          v-model="form.lining_one"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料2" prop="lining_two">
        <el-input
          placeholder="请输入面料2"
          v-model="form.lining_two"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料3" prop="lining_three">
        <el-input
          placeholder="请输入面料3"
          v-model="form.lining_three"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料4" prop="lining_four">
        <el-input
          placeholder="请输入面料4"
          v-model="form.lining_four"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料5" prop="lining_five">
        <el-input
          placeholder="请输入面料5"
          v-model="form.lining_five"
        ></el-input>
      </el-form-item>
      <el-form-item label="版面">
        <el-select v-model="form.ban" placeholder="请选择" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="水洗唛标准" prop="ximaiid">
        <el-select v-model="form.ximaiid" placeholder="请选择" clearable>
          <el-option
            v-for="item in sxmbz"
            :key="item.value"
            :label="item.ximainame"
            :value="item.ximaiid"
          >
            <div>
              {{ item.ximainame }}
              <el-image
                :src="el"
                fit="contain"
                style="width: 20px; height: 20px; margin-left: 20px"
                v-for="(el, idx) in item.ximaiimg"
                :key="idx"
              ></el-image>
            </div>
          </el-option>
        </el-select>
        <!-- <div v-for="(e, index) in sxmbz" :key="index">
          <el-radio v-model="index" label="1"
            >{{ index + 1 }}. {{ e.ximainame }}
            <div>
              <el-image
                :src="el"
                fit="contain"
                style="width: 40px; height: 40px; margin-left: 20px"
                v-for="(el, idx) in e.ximaiimg"
                :key="idx"
              ></el-image></div
          ></el-radio>
        </div> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  postAdminCodeSetFabricMaintain,
  postAdminCodeGetFabricMaintainLook,
  postAdminApiCodeGetTypenoSku,
  postAdminCodeAddFabricMaintain,
  postAdminCodesetProcessingMaintainListXimai,
} from "@/api";
export default {
  data() {
    return {
      isIndeterminate: true,
      checkAll: false,
      list: [],
      options: [
        {
          value: "版1",
          label: "版1",
        },
        {
          value: "版2",
          label: "版2",
        },
        {
          value: "版3",
          label: "版3",
        },
      ],
      form: {
        type_no: "",
        sku_code: [],
        lining_one: "",
        lining_two: "",
        lining_three: "",
        lining_four: "",
        lining_five: "",
        ban: "",
        ximaiid: "",
        ximainame: "",
        ximaiimg: "",
      },
      rules: {
        type_no: [{ required: true, message: "请输入款号", trigger: "blur" }],
        sku_code: [{ required: true, message: "请输入SKU", trigger: "blur" }],
        lining_one: [
          { required: true, message: "请输入面料1", trigger: "blur" },
        ],
        // ban: [{ required: true, message: "请选择版面", trigger: "blur" }],
        ximaiid: [
          { required: true, message: "请选择水洗唛标准", trigger: "blur" },
        ],
      },
      sxmbz: "",
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.postAdminCodesetProcessingMaintainListXimai();
    if (!id) {
      this.form = {
        type_no: "",
        sku_code: [],
        lining_one: "",
        lining_two: "",
        lining_three: "",
        lining_four: "",
        lining_five: "",
        ximaiid: "",
        ximainame: "",
        ximaiimg: "",
      };
    } else {
      this.postAdminCodeGetFabricMaintainLook(id);
    }
  },
  methods: {
    async postAdminCodesetProcessingMaintainListXimai() {
      let res = await postAdminCodesetProcessingMaintainListXimai();
      this.sxmbz = res.data;
      console.log("水洗唛------》", res);
    },
    handleCheckAllChange(val) {
      this.form.sku_code = val ? this.list : [];
      this.isIndeterminate = false;
    },
    // 款号获取SKU
    onBlur(e) {
      if (!this.form.id) {
        let type_no = this.form.type_no;
        if (type_no) {
          let obj = {
            type_no,
          };
          postAdminApiCodeGetTypenoSku(obj).then((res) => {
            this.list = res.data;
          });
        } else {
          this.$message.warning("请输入款号");
        }
      }
    },
    // 详情
    postAdminCodeGetFabricMaintainLook(id) {
      let obj = {
        id,
      };
      postAdminCodeGetFabricMaintainLook(obj).then((res) => {
        let data = res.data;
        delete data.createtime;
        delete data.fabric;
        delete data.overflow;
        this.form = data;
      });
    },
    // 编辑
    submitForm(formName) {
      let that = this;
      let sxmbz = that.sxmbz;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let index = 0; index < sxmbz.length; index++) {
            const element = sxmbz[index];
            if (sxmbz[index].ximaiid == that.form.ximaiid) {
              let obj = sxmbz[index];
              that.form.ximainame = obj.ximainame;
              that.form.ximaiimg = obj.ximaiimg;
            }
          }
          if (that.form.id) {
            that.postAdminCodeSetFabricMaintain(that.form);
          } else {
            that.postAdminCodeAddFabricMaintain(that.form);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    postAdminCodeAddFabricMaintain(form) {
      postAdminCodeAddFabricMaintain(form).then((res) => {
        this.$message.success("新增成功");
        this.$router.go(-1);
      });
    },
    // 修改
    postAdminCodeSetFabricMaintain(form) {
      postAdminCodeSetFabricMaintain(form).then((res) => {
        this.$message.success("修改成功");
        this.$router.go(-1);
      });
    },
    //
    handleCheckedCitiesChange(value) {
      console.log("value", value);
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.LiningAdminDetail {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  /deep/ .el-input {
    width: 500px;
  }
}
</style>